<template>
    <div class="help_mod" :class="themeClass">
      <v-nav ::no_back="true" title="$t('message.新闻资讯')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
      <v-nav :no_back="true"  :title="$t('message.新闻资讯')" v-if="isDayTime === true"></v-nav>
      <div class="help_mod_box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
            <van-cell v-for="(item, index) in helpList" :key="index" @click="jumpRouter('/mine/contentdetail', item.id)" :class="themeClass1">
              <template #title>
                <img src="@/assets/img/Question@2x.png" alt="" />
                <p class="custom-title" :class="bgColor">{{ item.title }}</p>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>
      <v-footer></v-footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Content',
    data() {
      return {
        page: 1,
        loading: false,
        finished: false,
        refreshing: false,
        helpList: [],
        isDayTime: false
      }
    },
    computed: {
      themeClass() {
        return this.isDayTime ? '' : 'darknight'
      },
      bgColor() {
        return this.isDayTime ? 'black' : 'white'
      },
      themeClass1() {
        return this.isDayTime ? '' : 'dark_li_color'
      }
    },
    watch: {
      '$store.state.nightMode': {
        handler(newVal) {
          this.isDayTime = newVal
        },
        immediate: true
      }
    },
    methods: {
      jumpRouter(router, id) {
        this.$router.push({
          path: router,
          query: {
            id: id
          }
        })
      },
      async getHelpList() {
        await this.$https.get('/platform/getContentList?page=' + this.page).then(res => {
          if (this.refreshing) {
            this.helpList = []
            this.refreshing = false
          }
          this.helpList = [...this.helpList, ...res.data.data]
          this.loading = false
  
          if (this.page >= res.data.last_page) {
            this.finished = true
          } else {
            this.page++
          }
        })
      },
      // 上拉加载处理函数
      onLoad() {
        this.getHelpList()
      },
      // 下拉刷新处理函数
      onRefresh() {
        this.refreshing = true
        this.finished = false
        this.page = 1
        this.loading = true
        this.onLoad()
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  @import url('./content.less');
  </style>
  